<template>
    <view-box style="background:#F3F6F7;">
        <div style="height:20px;"></div>
        <div class="backg-border" >
            <div class="dis-pliou" style="padding:2px;flex-wrap: wrap;">
                 <p style="width:80%;">
                    <x-input v-model="addBasic" name="school_name" id="iputid" placeholder="请输入ID" ></x-input>
                </p>
                 <p class="conpouc" style="width:20%;" @click="myFunction">
                    <i slot="icon" class="icon-jiahaocu iconfont"></i>
                </p>
            </div>
        </div>
        <div style="height:10px;"></div>
        <div class="backg-border">
            <p class="colkdh" v-for="(item, index) in adddata" :key="index" @click="delet(index)">
                <span style="font-size:14px;color:#bababa">用户ID：</span>{{item}}
            </p>
        </div>
        <div style="height:10px;"></div>
         <group style="width:92%;margin-left:4%;">
            <x-button style="background:#32B6C6;color:#fff;" @click.native="generateOrder">确定</x-button>
        </group>
    </view-box>
</template>
<script>
import { ViewBox, Box, Flexbox, FlexboxItem, XHeader, Timeline, TimelineItem, XButton, CellBox, Group, XInput } from 'vux'
export default {
  components: {
    ViewBox,
    Box,
    Flexbox,
    FlexboxItem,
    XHeader,
    Timeline,
    TimelineItem,
    XButton,
    CellBox,
    Group,
    XInput
  },
  data () {
    return {
      count: 3,
      addBasic: '',
      adddata: []
    }
  },
  methods: {
    delet (inde) {
      this.adddata.splice(inde, 1)
    },
    myFunction () {
      if (this.addBasic !== '') {
        this.adddata.push(this.addBasic)
        this.addBasic = ''
      }
    },
    generateOrder () {
      this.$http.post('/teamBuy', {team_user_id: this.adddata}).then((response) => {
        // 订单金额为零时，不需要支付
        //   console.log(response.data.order)
        this._pay(response.data.order.id)
      }).catch((error) => {
        console.log(error)
      })
    },
    _pay (id) {
      let json = {}
      let callpay = () => {
        if (typeof WeixinJSBridge === 'undefined') {
          if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
          } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
          }
        } else {
          onBridgeReady()
        }
      }
      let onBridgeReady = () => {
        WeixinJSBridge.invoke('getBrandWCPayRequest', json, (res) => {
          if (res.err_msg === 'get_brand_wcpay_request:ok') {
            this.$router.replace('/myassessment')
            this.save()
            this.getMyYiSort()
          } else {
            this.getMyYiSort()
            this.$router.replace('/myassessment')
          }
        })
      }
      this.$http.get('/pay/wxpay-' + id).then((response) => {
        console.log(response.data)
        json = response.data
        callpay()
      }).catch((error) => {
        console.log(error)
      })
    }
  }
}
</script>
<style scoped lang="less">
  .backg-border{
    width: 91%;
    margin-left: 4%;
    background: #ffffff;
    border-radius: 7px;
  }
  .dis-pliou{
      width: 100%;
      display: flex;
  }
  .conpouc{
      height: 50px;
      line-height: 50px;
  }
  .colkdh{
      width: 92%;
      margin-left: 4%;
      height: 40px;
      line-height: 40px;
  }
</style>
<style>
.backg-border .vux-no-group-title {
    margin-top: 0 !important;
}
    .vux-label{
        font-size: 14px !important;
    }
  .weui-cells:before {
    border-top: 0px solid #D9D9D9!important;
}
.weui-cells:after {
    border-bottom: 0px solid #D9D9D9!important;
}
.weui-cell:before {
    border-top: 0px solid #D9D9D9!important;
}
.vux-no-group-title {
    margin-top:0 !important;
}
</style>